<template>
  <div class="app-container">
    <!-- 上部分表单 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      label-position="left"
      class="globalSerchFormStyle"
      style="margin: 10px 0px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="所属油企名称"
            prop="enterpriseName"
            size="small"
            label-width="100px"
          >
            <el-select
              v-model="queryParams.enterpriseId"
              :clearable="true"
              filterable
              placeholder="请选择所属油企名称"
              @change="handleSelectChange"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="分账出款商户名称"
            prop="stationName"
            size="small"
            label-width="130px"
          >
            <el-select
              v-model="queryParams.stationId"
              :clearable="true"
              filterable
              placeholder="请选择分账出款商户名称"
            >
              <el-option
                v-for="(item, index) in stationIdList"
                :key="index"
                :value="item.stationId"
                :label="item.stationName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间" prop="">
            <el-date-picker
              size="small"
              v-model="dateRangeCreatedDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 190px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="分账出款商户编号"
            prop="code"
            clearable
            size="small"
            label-width="130px"
          >
            <el-input
              v-model="queryParams.beginMmo"
              placeholder="请输入分账出款商户编号"
              style="width: 100px"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-left: -0.8rem">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            size="small"
            style="margin-left: 20px"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            icon="el-icon-refresh"
            size="small"
            @click="resetQuery"
            style="margin-left: 10px"
            plain
            >重置</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd"
            size="small"
            style="margin-left: 10px"
            >新增</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      :loading="loading"
      style="width: 100%"
      :data="tableList"
      v-loading="loading"
    >
      <af-table-column
        label="分账出款商户名称"
        align="left"
        prop="stationName"
        width="300px"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="handleView(row)">
            {{ row.stationName }}
          </el-button>
        </template>
      </af-table-column>
      <af-table-column
        label="分账出款商户编号"
        align="left"
        prop="beginMmo"
        width="200px"
      />
      <af-table-column
        label="所属油企名称"
        align="left"
        prop="enterpriseName"
        width="200px"
      />
      <af-table-column
        label="最大分账比例"
        align="left"
        prop="maxPercentage"
        width="200px"
      />
      <af-table-column
        label="创建时间"
        align="left"
        prop="createTime"
        width="200px"
      />
      <af-table-column
        label="修改时间"
        align="left"
        prop="updateTime"
        width="200px"
      />

      <af-table-column width="200px" label="状态" align="left" prop="status">
        <template slot-scope="{ row }">
          <span
            type="text"
            :style="{ color: row.status == 1 ? 'green' : 'red' }"
            >{{ row.status == 0 ? "停用" : "启用" }}</span
          >
        </template>
      </af-table-column>
      <af-table-column
        fixed="right"
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
      >
        <!--fixed="right"-->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            disable
            @click="handleOpen(scope.row)"
            >{{ scope.row.status == 1 ? "停用" : "启用" }}</el-button
          >
          <el-button
            size="mini"
            type="text"
            disable
            @click="handleEdit(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            disable
            @click="handleDel(scope.row)"
            >删除</el-button
          >

          <!-- <el-button size="mini" type="text" @click="handleView(scope.row)"
            >查看</el-button
          > -->
        </template>
      </af-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <ViewForm
      :viewDialog="viewDialog"
      :type="'rule'"
      :params="currentData"
      @changeDialog="viewDialog = false"
    ></ViewForm>
    <AddOrEdit
      :viewDialog="addOrEditDialog"
      :params="currentParams"
      :title="title"
      @changeDialog="closeEditDialog"
      :status="status"
      :statusType="statusType"
    ></AddOrEdit>
  </div>
</template>
<script>
import getUserProfileName from "@/utils/getUserProfile";
import ViewForm from "./ViewForm.vue";
import AddOrEdit from "./addOrEdit.vue";
import {
  viewRule,
  getRule,
  changeStatus,
  delRule,
  getStationByEnterprise,
  enterpriseList
} from "@/api/billingAgreements/index.js";

export default {
  name: "BaRule",
  components: { ViewForm, AddOrEdit },
  data() {
    return {
      loading: false,
      total: 0,
      // 查询参数
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        stationId: "",
      },
      // 油站列表
      stationIdList: [],
      // 表单数据
      tableList: [],
      loading: false,
      title: "新增",
      dateRangeCreatedDate: [],
      addOrEditDialog: false,
      viewDialog: false,
      currentData: {},
      currentParams: {},
      status: "",
      statusType: {},
      enterpriseList: [],
    };
  },
  created() {
    this.getList();
    this.getStationIdList();
    this.getEnterpriseList();
  },
  methods: {
    // 查询油企
    async getEnterpriseList() {
      const res = await enterpriseList();
      this.enterpriseList = res.rows;
    },
    // 删除
    async handleDel(row) {
      await this.$confirm("确认删除这条数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      const res = await delRule({
        stationId: row.stationId,
        beginMmo: row.beginMmo
      })
      this.$message.success(res.msg)
      this.getList();
    },
    // 启用
    async handleOpen(row) {
      let status, query;
      if (row.status == 0) {
        status = 1;
      } else {
        status = 0;
      }
      query = { status, beginMmo: row.beginMmo };
      const res = await changeStatus(query);
      this.getList();
    },
    // 根据油企获取油站
    handleSelectChange(value) {
      this.stationIdList = [];
      this.queryParams.stationId = null;
      this.getStationList(value);
    },
    // 根据油企获取油站
    async getStationIdList() {
      const value = this.$store.state.user.presentEnterprise?.enterpriseId;
      this.stationIdList = [];
      this.queryParams.stationId = null;
      const res = await getStationByEnterprise({ enterpriseId: value });
      this.stationIdList = res;
    },
    async getStationList(val) {
      // 判断是不是admin账号
      const isDelete = await getUserProfileName();
      if (isDelete) {
        // 是
        const res = await getStationByEnterprise({ enterpriseId: val });
        this.stationIdList = res;
      } else {
        // 不是
        const res = await getStationByEnterprise();
        this.stationIdList = res;
      }
    },
    // 新增
    handleAdd() {
      this.title = "新增";
      this.status = "add";
      this.addOrEditDialog = true;
    },
    // 查看
    async handleView(row) {
      this.currentData = await viewRule({
        beginMmo: row.beginMmo,
        stationId: row.stationId,
      });
      this.viewDialog = true;
    },
    // 修改
    async handleEdit(row) {
      const res = await viewRule({
        beginMmo: row.beginMmo,
        stationId: row.stationId,
      });
      this.currentParams = res;
      this.status = "edit";
      this.title = "修改";
      this.statusType = row;
      this.addOrEditDialog = true;
    },
    // 查询
    async handleQuery() {
      this.getList();
    },
    // 重置
    async resetQuery() {
      this.queryParams = {
        pageSize: 10,
        pageNum: 1,
        stationId: "",
        beginMmo: "",
        enterpriseId: "",
      };
      this.dateRangeCreatedDate = [];
      this.handleQuery();
    },
    // 获取初始值
    async getList() {
      this.loading = true;
      const queryParams = {
        ...this.queryParams,
        beginTime: this.dateRangeCreatedDate[0],
        endTime: this.dateRangeCreatedDate[1],
      };
      const res = await getRule(queryParams);
      this.tableList = res.rows;
      this.total = res.total;
      this.loading = false;
    },
    closeEditDialog() {
      this.addOrEditDialog = false;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped></style>
